//表格头部的过滤条件
import { Button, Input, RangePicker, Select, Space, Modal, Tree, Switch } from '@kedacom/react-next'
import useFilterHook from '../servers/filterServer'
import { FilterViewProps } from '../interface'
import { SearchIcon } from '@/components/Icon'
import { StyledButton, StyledModal } from '../styles/alarmStyle'
import { forwardRef } from 'react'
import { behaviorCategoryList, levelList } from '../context'
const FilterView = ({ onFilterSearch }: FilterViewProps, ref: any) => {
	const { filterData, alarmTreeData, selfEnable, setSelfEnable, ...useHook } = useFilterHook(ref, onFilterSearch)
	return (
		<>
			<Space style={{ flexWrap: 'wrap' }}>
				<Input
					width={useHook.INPUT_WIDTH}
					value={filterData.key}
					onChange={(e, v) => useHook.onChange(v, 'key')}
					onEnter={(e, v) => onFilterSearch()}
					placeholder="输入搜索内容"
					maxLength={128}
				/>
				<Select
					width={useHook.SELECT_WIDTH}
					value={filterData.kind}
					height={22}
					options={behaviorCategoryList}
					onChange={(e, val, opt, values) => {
						useHook.onChange(val, 'kind')
					}}
				/>
				<Select
					width={useHook.SELECT_WIDTH}
					value={filterData.level}
					height={22}
					options={levelList}
					onChange={(e, val, opt, values) => {
						useHook.onChange(val, 'level')
					}}
					panelMaxItemCount={10}
				/>
				<RangePicker
					className="date-picker"
					format="YYYY-MM-DD"
					leftPanelProps={{ placeholder: '开始时间' }}
					rightPanelProps={{ placeholder: '结束时间' }}
					onChange={useHook.onTimeRangChange}
					defaultValue={useHook.timeRangValue}
				/>
				<SearchIcon className="search-icon" onClick={() => onFilterSearch()}></SearchIcon>
				<StyledButton className="button-set">
					<Space className="button-wrap">
						<Button
							// disabled={isDisabledChange()}
							onClick={() => {
								useHook.showModalEvent(true)
							}}
						>
							设置告警项
						</Button>
					</Space>
				</StyledButton>
			</Space>
			<Modal
				open={useHook.showModal}
				title="设置告警项"
				onCancel={() => useHook.showModalEvent(false)}
				onOk={() => useHook.confirmEvent()}
			>
				<StyledModal>
					<div className="header-group">
						<span>是否开启自定义告警选项</span>
						<Switch
							checked={selfEnable}
							onChange={(e, v) => {
								useHook.showAlarmAll(v)
								setSelfEnable(v)
							}}
						/>
					</div>
					{selfEnable && (
						<>
							<div className="header-group self-group">
								<span>请选择自定义告警项</span>
								{/* <CheckBox
							checked={useHook.allValue}
							width={100}
							onChange={(e, v) => {
								useHook.setAllValue(v)
							}}
						>
							全选
						</CheckBox>
						<CheckBoxGroup
							options={useHook.selectOptions}
							value={useHook.value}
							onChange={(e, v, o, l) => {
								useHook.setValue(v)
							}}
						/> */}
							</div>
							<div className="tree">
								<Tree
									treeData={alarmTreeData}
									onExpand={(e, keys) => {
										useHook.setExpandedKeys(keys)
									}}
									onSelect={(e, keys, selectKey, selectedNodes) => {
										useHook.setSelectedKeys(keys)
									}}
									selectedKeys={useHook.selectedKeys}
									expandedKeys={useHook.expandedKeys}
									virtualized
									height={270}
									checkable
									checkedKeys={useHook.checkedKeys}
									onCheck={(e, keys) => {
										useHook.setCheckedKeys(keys)
									}}
								/>
							</div>
						</>
					)}
				</StyledModal>
			</Modal>
		</>
	)
}

export default forwardRef(FilterView)
